<template>
    <!-- 预览 -->
    <el-drawer
        v-model="drawerData.show"
        custom-class="drawer-box"
        :title="drawerData.title"
        :before-close="handleClose"
        size="500px">
        <template #title>
            <span class="drawer-title">{{ drawerData.title }}</span>
        </template>
        <div class="content-box">
            <div class="title">标题：{{ data.title || '' }}</div>
            <div class="title">创建人：{{ data.created_name || '' }}</div>
            <div class="title">创建时间：{{ data.created_at || '' }}</div>
            <el-image
                class="preview-img"
                :preview-src-list="[data.poster_url]"
                :preview-teleported="true"
                :src="data.poster_url"
                fit="cover" />
        </div>
    </el-drawer>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
const DepartRef = ref(null);
const data = ref();
const props = defineProps(['itemInfo']);
const drawerData = ref({
    show: false,
    title: '预览',
    direction: 'rtl' //从右往左打开
});
watch(
    () => props.itemInfo,
    val => {
        data.value = val;
    }
);

// 关闭
const handleClose = () => {
    drawerData.value.show = false;
};

defineExpose({ drawerData });
</script>

<style lang="scss" scoped>
.drawer-box {
    .drawer-title {
        color: #333;
        font-weight: bold;
        margin-bottom: 0;
    }

    .content-box {
        height: calc(100vh - 100px);
    }

    .title {
        font-size: 14px;
        font-family: PingFangSC-Regular, 'PingFang SC';
        font-weight: 400;
        color: #33302d;
        margin-bottom: 20px;
    }

    .preview-img {
        width: 400px;
    }
}
</style>
